<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>文件操作</title>
    <link rel="stylesheet" href="test.css" />
    <style>
      .visually-hidden {
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
      }

      input.visually-hidden:is(:focus, :focus-within) + label {
        outline: thin dotted;
      }

      #dropbox {
        height: 100px;
        width: 100px;
        border: 1px solid #999;
      }

      #preview {
        height: 100px;
        border: 1px solid #999;
      }

      #preview .obj {
        width: 100px;
        height: 100px;
        margin-right: 10px;
      }
    </style>
  </head>

  <body>
    <h3>1 单选</h3>
    <input type="file" id="input1" />

    <h3>2 多选</h3>
    <!-- 可选择多个文件 -->
    <input type="file" id="input2" multiple />

    <h3>3 隐藏input元素实现文件选择</h3>
    <input type="file" id="fileElem" multiple style="display: none" />
    <button id="fileSelect" type="button">选择一些文件</button>

    <h3>4 使用 label 元素来触发一个隐藏的文件 input 元素</h3>
    <!-- 为了允许在不使用 JavaScript（click() 方法）的情况下打开文件选择器，可以使用 <label> 元素。
    注意，在这种情况下，input 元素不能用 display: none 来隐藏（也不能用 visibility: hidden），否则标签就不具有键盘无障碍性。 -->
    <input type="file" id="fileElem1" multiple class="visually-hidden" />
    <label for="fileElem1">选择一些文件</label>

    <h3>5 使用拖放来选择文件</h3>
    <div id="dropbox"></div>

    <h3>6 显示用户选择的图片的缩略图</h3>
    <input type="file" id="input3" multiple accept="image/*" />
    <div id="preview"></div>

    <h3>7 使用对象 URL</h3>
    <p>
      DOM 的 URL.createObjectURL() 和 URL.revokeObjectURL() 方法让你创建简单的 URL 字符串， 可以用来引用任何可以用 DOM
      File 对象引用的数据，包括用户电脑中的本地文件。
    </p>
    <h4>7.1 使用对象 URL 来显示图片</h4>
    <input type="file" id="input4" multiple accept="image/*" style="display: none" />
    <a href="#" id="fileSelect4">选择一些文件</a>
    <div id="fileList">
      <p>没有选择任何文件！</p>
    </div>

    <script src="./index.js"></script>
  </body>
</html>
